<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4" style="color:width;">
    <div class="container-fluid">
      <router-link class="navbar-brand" to="/">游趣阁</router-link>
      <ul v-if="!user.isLogined" class="list-inline mb-0">
        <li class="list-inline-item text-white">
          <router-link to="/login" class="btn btn-outline-light my-2">登陆</router-link>
        </li>
        <li class="list-inline-item text-white">
          <router-link to="/signup" class="btn btn-outline-light my-2">注册</router-link>
        </li>
      </ul>
      <ul v-else class="list-inline mb-0">
        <li class="list-inline-item text-white">
          <drop-down :title="`欢迎回来！${user.name}`">
            <drop-down-item @click="logTest">个人中心</drop-down-item>
            <drop-down-item disabled>新建文章</drop-down-item>
            <drop-down-item>设置</drop-down-item>
            <drop-down-item>注销</drop-down-item>
          </drop-down>
        </li>
      </ul>
    </div>
    <!-- 鼠标右键菜单测试 -->
  </nav>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue'
import DropDown from '@/components/dropdown/DropDown.vue'
import DropDownItem from '@/components/dropdown/DropDownItem.vue'

export default defineComponent({
  name: 'GlobalHeader',
  components: {
    DropDown,
    DropDownItem
  },
  props: {
    user: {
      type: Object as PropType<UserProp>,
      required: true
    }
  },
  setup () {
    const logTest = () => {
      console.log('testest')
    }
    return {
      logTest
    }
  }
})
</script>

 <style>
</style>
